import React, { Component } from 'react'
import "./index.css"
import SearchInput from "../SearchInput/SearchInput"
import { Carousel } from 'antd-mobile';
import myaxios from "../../utils/myaxios"
import { withRouter } from "react-router-dom";
import axios from "axios"

class Index extends Component {
  constructor(props) {
    super(props);
    const CancelToken = axios.CancelToken;
    this.source = CancelToken.source();
  }
  state = {
    swiper_list: [],
    imgHeight: 170,
    catitems: [], //首页分类的数据
    productData: [],  //首页楼层列数据
  }
  componentDidMount() {
    // 首页轮播图数据
    myaxios
      .get("home/swiperdata", {
        cancelToken: this.source.token
      })
      .then((res) => {
        this.setState({
          swiper_list: res
        })
      })
      .catch((err) => { console.log(err) })

    // 首页导航列表数据
    myaxios
      .get("/home/catitems", {
        cancelToken: this.source.token
      })
      .then((res) => {
        this.setState({
          catitems: res
        })
      })

    // 首页楼层列表数据
    myaxios
      .get("/home/floordata", {
        cancelToken: this.source.token
      })
      .then((res) => {
        this.setState({
          productData: res
        })
      })
  }
  // 轮播点击事件
  handleSwiperClick = (goods_id) => {
    this.props.history.push("/goodDetail/" + goods_id)
  }
  // 导航列表点击事件
  handleCatitemsClick = (params) => {
    this.props.history.push("/category")
  }
  // 热门推荐点击事件
  handleImgClick = (e) => {
      //  底部绑定navigator_url 分割传来的数据 截取需要的关键字(爆款,胸针...)
    let navigator = e.target.getAttribute("data-navigator_url").split("=", 2)[1]
    this.props.history.push("/goodList?" + "query=" + navigator)

  }

  componentWillUnmount() {
    this.source.cancel('Operation canceled by the user.');
  }
  render() {
    return (
      <div className="yg-index">
        {/* 头部开始 */}
        <div className="yg-index-nav">
          <div className="index-nav">优购商城</div>
        </div>
        {/* 头部结束 */}
        {/* 搜索部分开始 */}
        <div className="yg-index-search">
          <SearchInput></SearchInput>
        </div>
        {/* 搜索部分结束 */}
        {/* 轮播图开始 */}
        <div className="yg-index-banner">
          <Carousel
            autoplay={true}
            infinite
          >
            {this.state.swiper_list.map(val => (
              <div
                onClick={this.handleSwiperClick.bind(this, val.goods_id)}
                key={val.goods_id}
                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
              >
                <img
                  src={val.image_src}
                  alt=""
                  key={val.image_src}
                  style={{ width: '100%', verticalAlign: 'top' }}
                  onLoad={() => {
                    // fire window resize event to change height
                    window.dispatchEvent(new Event('resize'));
                    this.setState({ imgHeight: 'auto' });
                  }}
                />
              </div>
            ))}
          </Carousel>
        </div>
        {/* 轮播图结束 */}

        {/* 首页分类导航开始 */}
        <div className="yg-index-catitems">
          <div className="catitems-item">
            {
              this.state.catitems.map((v) => {
                return <div className="catitemsBox"
                  key={v.image_src}
                  onClick={this.handleCatitemsClick}>
                  <img src={v.image_src} alt="" />
                </div>
              })
            }
          </div>
        </div>
        {/* 首页分类导航结束 */}

        {/* 楼层列表开始 */}
        <div className="yg-index-productData">
          {
            this.state.productData.map((v) => {
              return <div className="productData-item"
                key={v.floor_title.image_src}>
                {/* 标题开始 */}
                <div className="product-title">
                  <img src={v.floor_title.image_src} alt="" />
                </div>
                {/* 标题结束 */}

                {/* 图片列表的开始 */}
                <div
                  className="product-image-list"
                  onClick={this.handleImgClick}
                >
                  {
                    v.product_list.map((vv) => {
                      return (
                        <div className="image-list-item"
                          key={vv.image_src}
                        >
                            <img 
                            data-navigator_url={vv.navigator_url}
                            className="item-img" 
                            style={{ width: "100%", height: "100%" }} 
                            src={vv.image_src} 
                            alt="" />
                        </div>
                      )
                    })
                  }
                </div>
                {/* 图片列表的结束 */}
              </div>
            })
          }
        </div>
        {/* 楼层列表结束 */}
      </div>
    )
  }
}
export default withRouter(Index)